<!DOCTYPE html>
<html>
	<head>
		<title>LOGIN</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!-- Custom Theme files -->
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
		<link href="css/login_snow.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/login_style.css" rel="stylesheet" type="text/css" media="all" />

	</head>
	<body>
		<div class="snow-container">
			<div class="snow foreground"></div>
			<div class="snow foreground layered"></div>
			<div class="snow middleground"></div>
			<div class="snow middleground layered"></div>
			<div class="snow background"></div>
			<div class="snow background layered"></div>
		</div>

		<div class="top-buttons-agileinfo">
			<a href="login.html" class="active">登录</a><a href="signup.html">注册</a>
		</div>
		<h1>锤子商城</h1>
		<div id="app">
			<div class="main-agileits">
				<!--form-stars-here-->
				<div class="form-w3-agile">
					<h2 class="sub-agileits-w3layouts">登录</h2>
					<form>
						<input type="text" name="Text" placeholder="用户名" id="username" v-model="user.username" />

						<input type="password" name="Password" placeholder="密码" id="password" v-model="user.password" />
						<!-- <a href="#" class="forgot-w3layouts">忘记密码 ?</a> -->
						<div class="submit-w3l">
							<input type="button" value="登录" onclick="Auth.login(vue.$data.user)" />
						</div>
						<p class="p-bottom-w3ls">还没有帐户---<a href="signup.html">点击注册</a></p>
					</form>
				</div>
			</div>
		</div>
		<div class="copyright w3-agile">
			<p> © 2017</p>
		</div>
		<script type="text/javascript" src="./js/jquery3.js"></script>
		<script type="text/javascript">
			function check() {
				if ($("#username").val() == "") {
					$("#username").tips({
						side: 2,
						msg: '用户名不能为空',
						bg: '#2ba6df',
						time: 3
					});
					$("#username").focus();
					return false;
				}
				if ($("#password").val() == "") {
					$("#password").tips({
						side: 2,
						msg: '密码不能为空',
						bg: '#2ba6df',
						time: 3
					});
					$("#password").focus();
					return false;
				}
				return true;
			}
			let global_api_url = "http://localhost:8080/mall/";
			let Auth = {
				USER_AUTH_KEY: "Authorization",
				authObj: null,

				/**
				 * 登录
				 */
				login(user) {
					if (check()) {
						axios.post(global_api_url + "login", user).then(rs => {
							if (rs.data.code == 0) {
								//登录成功
								let userAuth = rs.data.data;
								//存用户权限信息
								this.setAuth(userAuth);
								//决定是否跳转
								this.gotoManagerCenter(userAuth.token);
							} else {
								alert(rs.data.msg);
							}
						}).catch(err => {
							alert(err);
						});
					}
				},

				/**
				 * 退出
				 */
				logout() {
					axios.get(global_api_url + "logout").then(rs => {
						if (rs.data.code == 0) {
							this.deleteAuth();
							document.location.reload();
						} else {
							alert(rs.data.msg);
						}
					}).catch(err => {
						alert(err)
					});
				},

				/**
				 * 保存用户基本权限信息
				 * @param auth
				 */
				setAuth(auth) {
					if (auth) {
						let authString = JSON.stringify(auth);
						window.sessionStorage.setItem(this.USER_AUTH_KEY, authString);
					}
				},
				/**
				 * 清除sessionStorage中的userAuth
				 */
				deleteAuth() {
					window.sessionStorage.removeItem(this.USER_AUTH_KEY);
				},

				/**
				 * 可以直接调用此方法获得当前登录人
				 * @returns {null}
				 */
				getUserName() {
					return this._getVal("username");
				},

				/**
				 * 可以直接调用此方法获得角色名称
				 * @returns {null}
				 */
				getAuth() {
					return this._getVal("auth");
				},

				/**
				 * 可以直接调用此方法获得该用户的菜单
				 * @returns {null}
				 */
				getMenus() {
					return this._getVal("menus");
				},


				/**
				 * 可以直接调用此方法获得token，一般不需要调用
				 * 在checkIsLogin.js中已经设置到全局的headers中
				 * 访问后台API时，自动携带了token，无须每次都设置
				 * @returns {null}
				 */
				getToken() {
					return this._getVal("token");
				},

				/**
				 * 进入管理中心
				 * @param token
				 */
				gotoManagerCenter(token) {
					if (token) {
						document.location.href = "./index.html";
					}
				},

				/**
				 * 进入登录页面
				 * @param token
				 */
				gotoLogin(token) {

					if (!token) {
						document.location.href = "./login.html";
					}
				},

				_getAuth() {
					let authString = window.sessionStorage.getItem(this.USER_AUTH_KEY);
					if (authString) {
						this.authObj = JSON.parse(authString);
					}
				},
				_getVal(val) {
					if (this.authObj == null) {
						//console.log("加载sessionStorage中的userAuth信息......");
						this._getAuth();
					}
					return this.authObj ? this.authObj[val] : null;
				}

			}
			let vue = new Vue({
				el: "#app",
				data: {
					user: {
						username: null,
						password: null
					},
					created() {
						//检测如果登录了，直接进入管理中心
						Auth.gotoManagerCenter(Auth.getToken());
					}
				}
			})
		</script>
		<script src="js/jquery.tips.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
